<template>
  <div id="btmOneLineChart"></div>
</template>
<script setup>
import * as echarts from "echarts";
import resize from "../../../../mixin/resize.js";
import { getCurrentInstance } from "vue";
let myChart = shallowRef();
let num = 10;

onMounted(() => {
  myChart.value = echarts.init(document.getElementById("btmOneLineChart"));
  resize(myChart.value);
  // resize(myChart.value)
  getServerData();
});
let option = {
  tooltip: {
    trigger: "axis", //触发类型 柱状图
    axisPointer: { type: "none" }, //触发效果 移动上去 背景效果
    formatter: function (prams) {
      var newStr = prams[0].name + ":<br/>";
      for (let index in prams) {
        console.log(prams[index].seriesName, " prams[index].seriesName");
        let unit = prams[index].seriesName == "贮存点(吨)" ? "吨" : "包";
        newStr +=
          prams[index].marker +
          " " +
          prams[index].seriesName +
          "：" +
          prams[index].value +
          unit +
          "<br/>";
      }
      return newStr;
    },
  },

  grid: {
    top: "5%",
    right: "3%",
    left: "3%",
    bottom: "2%",
    containLabel: true,
  },
  xAxis: [
    //x轴
    {
      type: "category", //坐标轴类型 离散
      data: ["周一", "周二", "周三", "周四", "周五"], //数据
      axisTick: false, //是否显示刻度
      axisLine: {
        //底部线
        show: true,
        lineStyle: {
          type: "solid",
          color: "#ccc",
          width: 2,
        },
      },
      axisLabel: {
        fontSize: 11,
        color: "#666",
        lineHeight: 18,
        formatter: function (value, index) {
          if (value !== undefined) {
            if (value.length > 5) {
              // 超出5个字符显示省略号
              return value.slice(0, 5) + "\n" + value.slice(5);
            }
            return value;
          }
        },
      },
    },
  ],
  yAxis: [
    //y轴
    {
      // name: "(万吨)", //名称
      // type: "value", //连续类型
      nameTextStyle: {
        padding: [0, 60, 2, 20], // 修改单位位置
        color: "#666",
        fontSize: 11,
        fontWeight: 400,
      },
      axisLine: {
        show: true, // 左坐标轴线
        lineStyle: {
          type: "solid",
          color: "#ccc",
          width: 2,
        },
      },
      splitLine: {
        //分割线
        show: false,
        lineStyle: {
          type: "solid",
          color: "#F1F1F1",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        // 左侧字颜色
        color: "#666",
        fontSize: 11,
        fontWeight: 400,
      },
    },
    {
      // name: "(次数)", //名称
      // type: "value", //连续类型
      nameTextStyle: {
        // padding: [0, 0, 5, 40], // 修改单位位置
        color: "#666",
        fontSize: 11,
        fontWeight: 400,
      },
      axisLine: {
        //坐标轴样式
        show: false, //显示 →坐标轴线
        lineStyle: {
          type: "solid",
          color: "#ccc",
          width: 2,
        },
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: "#fff", //右侧字颜色
        fontSize: 11,
        fontWeight: 400,
      },
    },
  ],
  series: [
    //系统列表
    {
      name: "贮存点(吨)", //名称
      type: "line", //类型
      barWidth: 20, //宽度
      data: [10, 12, 25, 32, 18], //数值
      z: 1,
      color: "#0066FF",
      smooth: true,
      showSymbol: false,
      symbolSize: 1,
    },
    {
      name: "贮存点(包)",
      type: "line",
      barWidth: 20,
      showSymbol: false,
      symbolSize: 1,
      yAxisIndex: 1,
      smooth: true,
      data: [10, 12, 35, 28, 90],
      z: 2,
      color: "#FFC947",
    },
  ],
};

let getServerData = () => {
  myChart.value.setOption(option);
};
</script>
<style lang="scss" scoped>
#btmOneLineChart {
  width: 100%;
  margin-top: 2vh;
  height: 12vh;
}
</style>
